<template>
    <div class="user">
        <div class="check-box"><van-checkbox v-model="props.isChecked"></van-checkbox></div>
        <div class="user-content">
            <div class="user-writter">用户id:{{ state._id }} </div>
            <div class="user-title">用户昵称:{{ state.userName }}</div>
            <div class="user-power" v-if="state.userPower == 0">用户权限:普通用户</div><div class="user-power" v-else>用户权限:管理员</div>
        </div>
        <div class="user-state">
            <div class="silence" v-if="(new Date(state.silenceTime).getTime() >= new Date().getTime())" @click="showSilenceTime"><img src="../assets/icons/silence.png" alt=""></div>
            <div class="nologin" v-if="(new Date(state.bannedTime).getTime()) >= new Date().getTime()" @click="showBannedTime"><img src="../assets/icons/nologin.png" alt=""></div>

        </div>
        <div class="user-image">
            <img :src=state.avatar alt="">
        </div>
    </div>
    
</template>

<script setup>
import dayjs from 'dayjs';
import {watch} from 'vue'
import { useStore } from "vuex"
import { Dialog } from "vant";
const props = defineProps({
    isChecked:{
        type:Boolean,
        default:false
    },
    state:{
        type:Object,
        default:{}
    }
})

const store = useStore()

watch(()=>props.isChecked, (curr, prev) => {
        if(curr == true){
            store.dispatch('addUserAction',props.state._id)

        }else{
            store.dispatch('deleteUserAction',props.state._id)
        }
})
    //展示用户还有多久禁言时间
function showSilenceTime(){
    let date =  new Date(props.state.silenceTime)
    date = dayjs(date).format('YYYY-MM-DD HH:mm')
    Dialog.alert({
    title: '禁言时间',
    message: date,
    theme: 'round-button',
    }).then(() => {
    });
}
    //展示用户还有多久封号时间
function showBannedTime(){
    let date =  new Date(props.state.bannedTime)
    date = dayjs(date).format('YYYY-MM-DD HH:mm')
    Dialog.alert({
    title: '封号时间',
    message: date,
    theme: 'round-button',
    }).then(() => {
    });
}

</script>

<style lang="less" scoped>
.user{
display: flex;
height: 80px;
padding: 4px 0;
border-bottom: 2px solid #d2d2d2;
.check-box{
    width: 50px;
    display: flex;
    justify-content: center;
    align-content: center;
}
.user-content{
    overflow: hidden;
    margin: auto 0;
    padding: 4px;
    text-align: left;
    align-items: center;
    width: 220px;
    div{
        margin: 4px;
    }
}
.user-state{
    width: 40px;
    margin: auto;
    img{
        width: 80%;
        height: 80%;
        margin: auto 0;
    }
}
.user-image{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    text-align: center;
    align-items: center;
    img{
        margin-top: 10px;
        width: 60px;
        height: 60px;
    border-radius: 50%;
    }
}
}
</style>